<template>
  <div class="reportcharts">
    <h2>{{title}}分时展示</h2>
    <div class="echardiv">
      <div class="repData" :id="kpiEchartsId"></div>
    </div>
  </div>
</template>

<script>
  let echarts = require("echarts");
  export default {
    props:{
      title:'',
      x_data:{
        default: function() {
          return []
        }
      },
      y_data:{
        default: function() {
          return []
        }
      },
      y_danwei:{
        default: function() {
          return ''
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#ccc',
              fontSize: 16,
            }
          },
          legend: {
            data: [],
            top: 20
          },
          color: ['#2c69f3','#FD8E56'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
          ]
        },
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },
        myChart: null,
        kpiEchartsId:'kpiEcharts'+ Number(
          Math.random()
          .toString()
          .substr(3, 15) + Date.now()
        ).toString(36)
      }
    },
    mounted(){
      setTimeout(() => {
        window.onresize = () => {
          this.loadEchartResize("");
        };
      }, 200);
      //点击收缩按钮
      this.$Bus.$on("ArrowClick", w => {
        this.loadEchartResize(w);
      });
      this.myChart = echarts.init(document.getElementById(this.kpiEchartsId));
      this.loadEchart(this.defaultEcharts);
      setTimeout(() => {
        this.loadEchartResize("");
      }, 200);
    },
    beforeDestroy(){
      this.$Bus.$off('ArrowClick');
      window.onresize=null;
    },
    methods:{
      UpData(ishavedata){
        if(ishavedata==false || this.y_data.length==0){
          this.loadEchart(this.defaultEcharts);
          return ;
        }
        this.option.series = []
        this.option.legend.data = []

        this.option.xAxis.data = this.x_data
        for(let i in this.y_data){
          this.option.legend.data.push(i)
          this.option.series.push(
            {
              name: i,
              type: 'bar',
              barMaxWidth: '50px',
              data:this.y_data[i],
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
          )
        }
        this.loadEchart(this.option);
      },
      loadEchart(option) {
        this.myChart.setOption(option, true);
      },
      loadEchartResize(w) {
        let opts;
        if (this.isEmpty(w)) opts = { width: w+110 };
        else {
          let con_w = $(".echardiv").width();
          opts = { width: con_w };
        }
        this.myChart.resize(opts);
      },
      isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
          return false;
        } else {
          return true;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .reportcharts{
    width: 100%;
    height: 600px;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
      display: inline-block;
      margin-right: 20px;
    }
    .echardiv{
      width: 100%;
      height: 520px;
      margin-top: 20px;
      .repData {
        width: 100%;
        height: 520px;
      }
    }

  }

</style>